iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Mobile Development

Android Studio 學習交流系列 第 7

[Day07]Android學習-元件介紹-Text系列(1)

  • 分享至 

  • xImage
  •  

上一篇文章介紹了Button元件而這篇要配合Button元件介紹可讓使用者輸入與顯示的Text系列元件,快速進入正題:

下圖是Text系列的相關元件
https://ithelp.ithome.com.tw/upload/images/20190921/201211494L0aHC7thy.png

Text系列依我的想法可分為顯示Text和輸入Text,依照這兩種分法進行討論:

顯示Text

向使用者呈現文字:

  1. TextView:用於顯示文字,可將開發者欲呈現的文字放入其元件
  2. CheckedTextView:顯示文字又含有checkbox的功能

輸入Text

提供使用者輸入的元件,分為以下不同的輸入類型:

  1. Plain Text:輸入一般文字 例如:姓名(中、英文)
  2. Password:提供輸入密碼
  3. Password:(Numeric)提供輸入密碼(數字形式)
  4. E-mail:提供電子郵件輸入形式
  5. Phone:提供電話號碼輸入形式
  6. Postal Address:提供郵政地址輸入形式
  7. Multiline Text:輸入文字超出範圍可以多行顯示
  8. Time:提供時間輸入形式
  9. Date:提供日期輸入形式
  10. Number:輸入數字
  11. Number(Signed):輸入數字(支援正負號輸入)
  12. Number(Decimal):輸入數字(限於"."的使用僅限一次)
  13. AutoCompleteTextView:輸入時提供使用者提示輸入選項
  14. MultiAutoCompleteTextView:輸入時提供使用者提示輸入選項(可以多值輸入)
  15. TextInputLayout:輸入提示不因輸入而消失

以下會實作顯示Text第1項和輸入Text第1~10項

下圖為最終呈現畫面

https://ithelp.ithome.com.tw/upload/images/20190921/20121149g7OoKP2clK.png

(程式說明以註解呈現)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--Text-->
    <!--android:ems 字符寬度-->
    <!--android:inputType 輸入類型-->
    <!--android:hint 提示-->
    
    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Text系列元件"
        android:textSize="20dp"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="輸入姓名"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPassword"
        android:hint="輸入密碼"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="numberPassword"
        android:hint="輸入密碼(數字)"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textEmailAddress"
        android:hint="輸入電子郵件"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="phone"
        android:hint="輸入電話號碼"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPostalAddress"
        android:hint="輸入郵政地址"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:gravity="start|top"
        android:inputType="textMultiLine"
        android:hint="多行輸入"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="time"
        android:hint="輸入時間"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="date"
        android:hint="輸入日期"
        android:layout_marginTop="5dp"
        />

    <EditText
        android:id="@+id/edt10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        android:hint="輸入數字"
        android:layout_marginTop="5dp"
       />

    <!--Button-->
    <!--設定元件的識別編號-->
    <!--元件在版面的寬度為元件內容大小-->
    <!--元件在版面的高度為元件內容大小-->
    <!--距離間隔版面20sp-->
    <!--按鈕文字為Button-->
    <!--設定偵聽器-->
    
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20sp"
        android:onClick="listener"
        android:text="送出"
        android:layout_marginTop="5dp"
        />
        
</LinearLayout>

大家可以參考一下各個輸入Text鍵盤允許輸入的資料型態為何

https://ithelp.ithome.com.tw/upload/images/20190921/20121149xgtWvhRCKM.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/20121149PlSfTnoom3.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/20121149qaMT5co5BC.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/20121149eqEa8oKWlx.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/20121149AsEjBDaPCB.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/20121149uCDL4inIyj.jpg
(下圖為多行輸入)
https://ithelp.ithome.com.tw/upload/images/20190921/201211497aS0nHaJbr.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/2012114976TFWGFyal.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/20121149oPewwbAe4A.jpg

https://ithelp.ithome.com.tw/upload/images/20190921/2012114933HF23oEXf.jpg

下一篇將接續介紹Text後半段的元件

/images/emoticon/emoticon69.gif

Thank you for your time.


上一篇
[Day06]Android學習-元件介紹-Button
下一篇
[Day08]Android學習-元件介紹-Text系列(2)
系列文
Android Studio 學習交流30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言